<template>
    <div v-loading.fullscreen.lock="!isInit" class="app-page">
        <template v-if="isInit">
          <el-config-provider :locale="locale">
                <template  v-if="!isFullPage">
                    <Header></Header>
                    <el-container class="app-page-wrapper">
                        <MenuSide></MenuSide>
                        <el-container direction="vertical">
                            <el-main :class="[mainWrapClass]">
                                <div v-if="route.meta?.name" class="page-title">
                                    <PageHeader/>
                                </div>
                                <div :class="[mainClass]">
                                    <router-view />
                                </div>
                            </el-main>
                        </el-container>
                    </el-container>
                </template>

                <router-view v-else />
                <ChangePwd
                    v-model:modelValue="pwdModelValue"/>
           </el-config-provider>
        </template>
    </div>
</template>
<script setup>
import { ElMessage, ElConfigProvider} from 'element-plus';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed, watch, nextTick } from 'vue';
import locationTransfer from '@/global/location-transfer';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

// 组件区，引入即注册
import Header from '@/components/header/app-header.vue';
import MenuSide from '@/components/menu/menu-side.vue';
import PageHeader from '@/components/page-header.vue';
import ChangePwd from '@/views/modify-pwd/index.vue';


const store = useStore();
const route = useRoute();

// 汉化
const locale = {
  name: 'zh-cn',
  el: {
    ...zhCn.el,
    pagination: {
      goto: '前往',
      pagesize: '条/页',
      total: '共 {total} 条',
      pageClassifier: '页'
    }
  }
};


// computed区
const isFullPage = computed(() => {
    return !!(route.meta || {}).fullScreen || route.path === '/';
});
const isInit = computed(() => {
    if(route.name === 'login' || store.state.user.initialized) {
        return true
    }
    return false
});

const mainWrapClass = computed(() => {
    if (route.name === 'welcome') {
        return 'page-main-container'
    }
    return 'page-main-container2'
})

const mainClass = computed(() => { // 父组件class
    if (route.name === 'welcome') {
        return 'welcome-wrapper'
    }
    return 'contain-wrap'
});

const pwdModelValue = computed(() => { // 修改密码弹窗显隐
    return store.state.pwdModelValue;
})

// watch区
watch(() => store.state.message, (newMsg, oldMsg) => {
    ElMessage(newMsg);
});

G_listenEvent('toast', (newMsg) => {
    ElMessage(newMsg);
});


watch(() => route.name, async (val) => {
    if(route.path != '/' && route.name !== 'login' && !store.state.user.initialized) {
        // 需要初始化一次的，可以放这里
        try{
            await store.dispatch('user/init', {
                currentName: route.name,
                activeMenuName: route.meta.activeMenuName,
                currentPath: route.path,
                currentMeta: route.meta
            });
        }catch(err){
            console.log(err);
        }
    }
});

// 相当于created
locationTransfer.registerRouter();

</script>

<style lang="scss">
@import "~@/assets/styles/common.scss";
.app-page-wrapper {
    height: calc(100vh - 64px);
    min-width: 1200px !important;
    .page-title {
        padding: 15px 0px;
        h3 {
            font-size: 16px;
            color: var(--main-text);
            margin: 0;
        }
    }
}
.welcome-wrapper{
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
}
</style>